<template>
  <div class="quality-efficiency">
    <div class="quality-efficiency title">
      <img src="../../assets/images/binzhou/title-one.png" alt="" />
    </div>
    <div class="content">
      <div class="content-left">
        <div class="content-left-item">
          <div class="img">
            <img src="../../assets/images/binzhou/time.png" alt="" />
          </div>
          <div class="text">
            <h5>累计节省时长</h5>
            <count-to class="count-to" :end-val="info.totalSaveTime" :delay="delay"></count-to>
          </div>
        </div>
        <div class="content-left-item">
          <div class="img">
            <img src="../../assets/images/binzhou/person.png" alt="" />
          </div>
          <div class="text">
            <h5>累计节省人天</h5>
            <count-to class="count-to" :end-val="info.totalSaveDay" :delay="delay"></count-to>
          </div>
        </div>
      </div>
      <div class="content-right">
        <div class="item">
          <echart width="150px" height="150px" :options="option1"></echart>
          <div class="bjt"></div>
          <p>效率整体提升</p>
        </div>
        <div class="item">
          <echart width="150px" height="150px" :options="option2"></echart>
          <div class="bjt"></div>
          <p>准确率提升</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { nextTick, onMounted, computed, watch, Prop, ref, Ref, reactive } from 'vue'
  import * as echarts from 'echarts'
  import { CountTo } from 'vue3-count-to'
  import type { ImproveQualityEfficiency } from '@/api/data'
  import appStore from '@/store'

  import echart from '@/components/echarts/index.vue'

  const { indexStoreData } = appStore.indexStore

  const option1 = computed(() => {
    return {
      title: {
        text: `{a| ${indexStoreData.improveQualityEfficiency.efficiencyImproveRate}%}`,
        x: 'center',
        y: 'center',
        textStyle: {
          rich: {
            a: {
              fontSize: '20',
              color: '#00FFE4',
              foontWeight: '600',
              height: 100,
              backgroundColor: {
                image:
                  ''
              }
            }
          }
        }
      },
      // backgroundColor: '#FFF',
      polar: {
        radius: ['42%', '50%'],
        center: ['50%', '50%']
      },
      angleAxis: {
        max: 100,
        show: false
      },
      radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      series: [
        {
          name: '',
          type: 'bar',
          roundCap: true,
          barWidth: 50,
          showBackground: true,
          backgroundStyle: {
            color: '#074962'
          },
          data: [indexStoreData.improveQualityEfficiency.efficiencyImproveRate],
          coordinateSystem: 'polar',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: '#0EE6D9'
                },
                {
                  offset: 1,
                  color: '#0EE6D9'
                }
              ])
            }
          }
        }
      ]
    }
  })
  const option2 = computed(() => {
    return {
      title: {
        text: `{a| ${indexStoreData.improveQualityEfficiency.accuracyImproveRate}%}`,
        x: 'center',
        y: 'center',
        textStyle: {
          rich: {
            a: {
              fontSize: '20',
              color: '#38D3FF',
              foontWeight: '600',
              height: 100,
              backgroundColor: {
                image:
                  ''
              }
            }
          }
        }
      },
      // backgroundColor: '#FFF',
      polar: {
        radius: ['42%', '50%'],
        center: ['50%', '50%']
      },
      angleAxis: {
        max: 100,
        show: false
      },
      radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      series: [
        {
          name: '',
          type: 'bar',
          roundCap: true,
          barWidth: 50,
          showBackground: true,
          backgroundStyle: {
            color: '#074962'
          },
          data: [indexStoreData.improveQualityEfficiency.accuracyImproveRate],
          coordinateSystem: 'polar',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: '#38D3FF'
                },
                {
                  offset: 1,
                  color: '#38D3FF'
                }
              ])
            }
          }
        }
      ]
    }
  })

  const delay = ref<number>(2000)
  // let info = reactive({ data: {} })

  const props = defineProps({
    data: {
      type: Object,
      default: () => ({})
    },
    delay: {
      type: Number,
      default: 2000
    }
  })

  const renderChart = () => {
    // info.data = props.data
    delay.value = props.delay
  }
  const info = computed(() => {
    return props.data
  })
  watch(
    props,
    () => {
      renderChart()
    },
    {
      deep: true
    }
  )
  onMounted(() => {
    nextTick(() => {
      renderChart()
    })
  })
</script>
<style lang="scss" scoped>
  .quality-efficiency {
    width: 337px;
    height: 283px;
    .title {
      width: 337px;
      height: 42px;
      background-image: url('@/assets/images/binzhou/icon-one.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      margin-bottom: 32px;
      padding-top: 14px;
      padding-left: 19px;
      img {
        display: inline-block;
        height: 16px;
      }
    }
    .content {
      &-left {
        display: flex;
        justify-content: space-around;
        align-items: center;
        &-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          img {
            width: 45px;
          }
          .text {
            margin-left: 10px;
            h5 {
              color: #ffffff;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              margin-bottom: 6px;
            }
            .count-to,
            p {
              color: #00ffe3;
              font-size: 18px;
              font-family: DIN;
              font-weight: bold;
            }
          }
        }
      }
      &-right {
        // margin-top: 20px;
        font-size: 14px;
        color: #ffffff;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .item {
          position: relative;
          .bjt {
            position: absolute;
            left: 32px;
            top: 60%;
            width: 84px;
            height: 39px;
            background-image: url('@/assets/images/binzhou/wy.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
          }
          .echart-class {
            z-index: 10;
            // background-image: url('@/assets/images/binzhou/wy.png');
            // background-size: cover;
            width: 84px;
            height: 39px;
            background-image: url('@/assets/images/binzhou/wy.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
          }
          .circular {
            margin-bottom: 24px;
          }
          p {
            font-size: 14px;
            color: #ffffff;
            font-family: Microsoft YaHei;
            text-align: center;
          }
        }
      }
    }
  }
</style>
